<template>
    <div class="big">
        <div class="code">
          <div class="icon1"></div>
          <div class="icon2"></div>
          <input class="date-main" v-model="date1" @click="dateChoose1" @change="cc" readonly>至
          <input class="date-main" v-model="date2" @click="dateChoose2" @change="cc" readonly>
        </div>
        <input type="button" class="search" value="查询" @click="cc">
        <div class="fix">{{codeName}}</div>
        <div class="rotate">
            <div id="main"></div>
        </div>
    </div>
</template>

<script>
import * as moment from 'moment';
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
export default {
    data(){
        return {
            date1:'',
            date2:'',
            dateList : [],
            numList : [],
            nameList : [],
            codeName : '',
        }
    },
    methods:{
        cc(){
            alert(1)
            if(!this.date1){
                this.$ddapi.toast('请选择开始日期');
                return;
            }
            if(!this.date2){
                this.$ddapi.toast('请选择结束日期');
                return;
            }
            if(this.date1>this.date2){
                this.$ddapi.toast('请选择正确的时间范围');
                return;
            }
            let time1 = new Date(this.date1).getTime();
            let time2 = new Date(this.date2).getTime();
            if(time2-time1>8035200000){
                this.$ddapi.toast('时间范围不可大于三个月');
                return;
            }
            this.initList('cc')
        },
        initList:function(cc){
            this.$ddapi.showPreloader('使劲加载中...')
            let res_=sessionStorage.getItem("sendData");
            let sendData=JSON.parse(res_)
            this.codeName = sendData.codeName[0];
            this.$http.post('api/product/queryCkhzByEchart',{startDate:this.date1,endDate:this.date2, codeList:sendData.codeList}).then(res=>{
                let result = res.data;
                if(result.code==100){
                    this.$ddapi.hidePreloader();
                    this.dateList = result.dateList;
                    
                    for (let i = 0; i < result.data.length; i++) {
                        let element = result.data[i];
                        this.numList=element.list
                    }
                    let num = this.dateList.length
                    document.getElementById('main').style.height=num * 30+'px'

                    var myChart = echarts.init(document.getElementById('main'));
                    
                    myChart.setOption({
                        title: {
                        text: '销售量图表',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                        }
                    },
                    legend: {
                        data: []
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: this.dateList,
                    },
                    series: [
                        {
                            name:'',
                            type: 'bar',
                            data:this.numList
                        }
                    ]
                });


                /* *********************************** */
                }
            })

        },
        dateChoose1(){
            this.$ddapi.datepicker().then(res=>{
            this.date1=res;
            })
        },
        dateChoose2(){
            this.$ddapi.datepicker().then(res=>{
            this.date2=res;
            })
        },
    },
    created:function(){
        this.date1 = moment().format('YYYY-MM-DD');
        this.date2 = moment().format('YYYY-MM-DD');
    }
}
</script>

<style>
.big{
    width: 100vw;
    height: 100vh;
    overflow: scroll;
}
.rotate{
    width: 100%;
    height:95%; 
    font-size: 1.5rem;
    color:#000;
}
#main{
    width: 100%;
    height: 100%;
}
.fix{
    width: 130px;
    height: 50px;
    position: fixed;
    top: 45px;
    right: 10px;
    font-size: 1.2rem;
} 
.code{
  width: 75%;
  height: 40px;
  float: left;
  color: #9d9d9d;
  border: 1px solid #d8dce5;
  box-sizing: border-box;
  background: #fff;
  margin-top: 3px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  line-height: 40px;
  font-size: 1.2rem;  
  position: relative;
}
.icon1{
  width: 1.4rem;
  height: 1.5rem;
  position: absolute;
  background:url('../../static/images/icon-date.png')no-repeat center/contain;
  left: 10rem;
  top:0;
  bottom: 0;
  margin:auto;
}
.icon2{
  width: 1.4rem;
  height: 1.5rem;
  position: absolute;
  background:url('../../static/images/icon-date.png')no-repeat center/contain;
  right: 0.5rem;
  top:0;
  bottom: 0;
  margin:auto;
}
.date-main{
  width: 44%;
  padding-left: 3%;
}
.search{
  width: 23%;
  height: 30px;
  float: right;
  margin-top: 8px;
  margin-right: 5px;
  border: 1px solid #1759A8;
  color: #1759A8;
  font-size: 1.2rem;
  line-height: 30px;
  box-sizing: border-box;
  border-radius: 3px;
}
</style>
